<template>
  <div class="AddResponse">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
    >
      <a-form-model-item label="名称" prop="name">
        <a-input v-model="form.name"></a-input>
      </a-form-model-item>
      <a-form-model-item label="HTTP状态码" prop="code" class="input">
        <a-input v-model="form.code" @focus="showCodeList = true" @blur="showCodeList = false"></a-input>
        <div v-show="showCodeList" class="codeList">
          <div class="item" @mousedown="changeCode(code)" v-for="code in Object.keys(statusName)">
            {{code}}
          </div>
        </div>
      </a-form-model-item>
      <a-form-model-item label="内容格式" prop="contentType">
        <a-select
          style="width: 100%"
          default-value="JSON"
          v-model="form.contentType"
        >
          <a-select-option v-for="type in contentTypeList" :key="type">
            {{type}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
export default {
  name: "AddResponse",
  data() {
    return {
      form: {
        name: '成功',
        code: '200',
        contentType: 'JSON',
      },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'change' }],
        code: [{ required: true, message: '请输入HTTP状态码', trigger: 'change' }]
      },
      contentTypeList: ['JSON', 'XML', 'HTML', 'Raw', 'Binary', 'MsgPack', 'Event-Stream'],
      statusName: {
        '200': '成功',
        '201': '成功',
        '202': '成功',
        '204': '删除成功',
        '400': '请求有误',
        '401': '没有权限',
        '403': '禁止访问',
        '404': '记录不存在',
        '410': '记录不存在',
        '422': '参数错误',
        '500': '服务器错误',
        '502': '网关错误',
        '503': '服务器故障',
        '504': '网关超时'
      },
      showCodeList: false
    }
  },
  methods: {
    changeCode(code) {
      this.form.code = code
      this.form.name = this.statusName[code]
    },
    submit() {
      let isValid
      this.$refs.ruleForm.validate(valid => {
        isValid = valid
      })
      return isValid
    }
  }
}
</script>

<style lang="less" scoped>
  .AddResponse{
    .input{
      position: relative;
      .codeList{
        position: absolute;
        top: 32px;
        width: 100%;
        height: 180px;
        overflow-y: auto;
        border: 1px solid #e8e8e8;
        border-radius: 5px;
        padding: 5px;
        box-shadow: 0px 3px 18px 0px rgba(0,0,0,0.05);
        z-index: 1000;
        background-color: white;
        .item{
          width: 100%;
          height: 30px;
          padding: 0 15px;
          line-height: 30px;
          border-radius: 5px;
          text-align: left;
          color: rgba(0, 0, 0, 0.65);
          cursor: pointer;
          &:hover{
            background-color: #f0fcff;
            color: #2BAEF2;
          }
        }
      }
    }
  }
</style>